<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        window.onload=function(){
            console.log(0);
        }
// 文档就绪函数
        // $(document).ready(function(){

        // })
        // $().ready(function(){

        // })
        // $(function(){

        // })

        
        // alert();
        // window.alert();

        // function a(){

        // }
        // console.log(a);

        //js --> jq
        // $(js/dom) --> 返回 jq对象
        //jq = $(div)
        // jq = $("<li>列表</li>")

        //jq ==转换成==>  js  
        // [0]
        // js = jq[0]
        // js = $div[0]

        $(function(){
            // var div=document.querySelector("div"); 原生js
            // var $div=$(".div");
            // :first可以单独使用
            var $div=$(".div");
            // $div.click(function(){

            // })


            // $("li:first") 不能加空格
            // $("li:eq(2)").css("color","red");给定索引值
            // $("li:gt(2)").css("color","green");大于索引值
            // $("li:lt(2)").css("color","blue"); 小于索引值

            // $("li:parent").css("color","red");含子元素或文本
            // $("li:has(span)").css("color","red");含有选择器的元素
            // $("li:contains(33333)").css("color","red");  包含(文本)
        })
    </script>
</head>
<body>
    <!-- <div class="div"></div> -->
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4<span>33333</span></li>
        <li>列表5</li>
        <li></li>
    </ul>
</body>
</html>